<div class="navbar navbar-light fixed-top navbar-expand-lg bg-light">
  <div class="container">
    <a class="navbar-brand" href='/'><i class="fas fa-cube"></i>  | 项目名称</a>
    <button class="navbar-toggler" type='button' data-toggle='collapse' data-target='.navbar-collapse' >
      <span class="sr-only">折叠</span>
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="nav-item {{ 'active' if title === 'Home'  else undefined }}"><a class="nav-link" href='/'>首页</a></li>
        <li class="nav-item {{ 'active' if title === 'Thing'  else undefined }}"><a class="nav-link" href='/things'>Things(CRUD DEMO)需要登录</a></li>
        <li class="nav-item {{ 'active' if title === 'API Examples'  else undefined }}"><a class="nav-link" href='/api'>API示例</a></li>
        <li class="nav-item {{ 'active' if title === 'Contact'  else undefined }}"><a class="nav-link" href='/contact'>联系表单</a></li>
      </ul>

      <ul class="nav navbar-nav ml-auto">
        {% if not user %}
        <li class="nav-item {{ 'active' if title === 'Login'  else undefined }}"><a class="nav-link" href='/Login'>登录</a></li>
        <li class="nav-item {{ 'active' if title === 'Create Account'  else undefined }}"><a class="nav-link" href='/signup'>注册</a></li>
        {% else %}
        <li class="dropdown nav-item {{ 'active' if title === 'Account Management'  else undefined }}">
          <a class="dropdown-toggle nav-link" href='#', data-toggle='dropdown'>
            {% if user.profile.picture %}
            <img src={{user.profile.picture}} />
            {% else %}
            <img src={{user.gravatar(60)}} />
            {% endif %}
            <span>{{user.profile.name}} || {{user.email}} || {{user.id}}</span>
            <i class="caret"></i>
          </a>
          <div class="dropdown-menu">
            <a class="dropdown-item" href='/account'>我的账号</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href='/logout'>退出</a>
          </div> 
        </li>
        {% endif %}
      </ul>
    </div>

  </div>

</div>


